<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件信息管理</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/bootstrap-table.min.css}" />
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<div class="container-fluid" style="padding-bottom:0px; padding-top:6px;">
    <div class="panel panel-default" style="margin-bottom:0px;">
        <div class="panel-body" style="padding-bottom:8px; padding-top:8px;">
            <form class="form-inline" id="file_form">
                <div class="form-group" style="margin-right:10px;">
                    <label>文件名称：</label>
                    <input type="text" class="form-control" name="fileName">
                </div>
                <div class="form-group" style="margin-right:10px;">
                    <label>文件类型：</label>
                    <select class="form-control" name="fileType">
                        <option value="">全部</option>
                        <option value="图片">图片</option>
                        <option value="文档">文档</option>
                        <option value="音乐">音乐</option>
                        <option value="视频">视频</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                <button type="button" id="btn_query" class="btn btn-primary btn-sm" onclick="searchData()">
                    <span class="glyphicon glyphicon-search"></span>&nbsp;查询
                </button>
                <button type="button" id="btn_reset" class="btn btn-warning btn-sm" onclick="resetData()">
                    <span class="glyphicon glyphicon-refresh"></span>&nbsp;重置
                </button>
            </form>
        </div>
    </div>
    <div id="toolbar" class="btn-group-sm">
        <button id="btn_add" type="button" class="btn btn-primary" onclick="fileUpload()">
            <span class="glyphicon glyphicon-plus"></span>&nbsp;上传文件
        </button>
        <button id="btn_delete" type="button" class="btn btn-danger" onclick="removeBatch()">
            <span class="glyphicon glyphicon-remove"></span>&nbsp;批量删除
        </button>
        <div style="display: none;">
            <input type="file" id="file_upload" />
        </div>
    </div>
    <div>
        <table id="sys_file"></table>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrap-table.min.js}"></script>
<script th:src="@{/js/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/layer/layer.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script>
var formId = "file_form";
var tableId = "sys_file";
var uploadId = "file_upload";

var queryUrl = "/list";
var uploadUrl = "/upload";
var downloadUrl = "/download";
var viewUrl = "/view";
var detailUrl = "/detail";
var removeUrl = "/remove";

$(function () {
    // 初始化Table
    var table = new TableInit();
    table.init();
});

var TableInit = function () {
    var obj = new Object();
    obj.init = function () {
        $('#' + tableId).bootstrapTable({
            url: queryUrl, // 请求后台的 URL(*)
            contentType: "application/x-www-form-urlencoded", // 编码类型
            method: 'post', // 请求方式(*)
            toolbar: '#toolbar', // 工具按钮用哪个容器
            striped: true, // 是否显示行间隔色
            cache: false, // 是否使用缓存, 默认为 true, 所以一般情况下需要设置一下这个属性(*)
            pagination: true, // 是否显示分页(*)
            sortable: true, // 是否启用排序
            sortName: "id", // 排序列名称
            sortOrder: "desc", // 排序方式, asc 或者 desc
            queryParams: obj.queryParams, // 传递参数(*)
            sidePagination: "server", // 分页方式: client 客户端分页 server 服务端分页(*)
            pageNumber: 1, // 初始化加载第一页
            pageSize: 10, // 每页的记录行数(*)
            pageList: [10, 20, 50, 100], // 可供选择的每页行数(*)
            search: false, // 是否显示表格搜索, 此搜索是客户端搜索, 不会进服务端
            strictSearch: true,
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            minimumCountColumns: 2, // 最少允许的列数
            clickToSelect: true, // 是否启用点击选中行
            height: 518, // 行高, 如果没有设置 height 属性, 表格自动根据记录条数决定表格高度
            uniqueId: "id", // 每一行的唯一标识, 一般为主键列
            showToggle:true, // 是否显示详细视图和列表视图的切换按钮
            cardView: false, // 是否显示详细视图
            detailView: false, // 是否显示父子表
            columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID',
                    sortable: true,
                    visible: false
                }, {
                    field: 'fileName',
                    title: '文件名称',
                    sortable: true
                }, {
                    field: 'fileSuffix',
                    title: '文件后缀',
                    sortable: true
                }, {
                    field: 'fileType',
                    title: '文件类型',
                    sortable: true
                }, {
                    field: 'fileSize',
                    title: '文件大小',
                    sortable: true
                },  {
                    field: 'filePath',
                    title: '存储路径',
                    sortable: true,
                    visible: false
                }, {
                    title: '操作',
                    align: 'left',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="fileDownload(\'' + row.id + '\')"><span class="glyphicon glyphicon-download-alt"></span>&nbsp;下载</a> ');
                        actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="detail(\'' + row.id + '\')"><span class="glyphicon glyphicon-pencil"></span>&nbsp;详情</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="remove(\'' + row.id + '\')"><span class="glyphicon glyphicon-trash"></span>&nbsp;删除</a> ');
                        if(row.fileType == '图片') {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="view(\'' + row.id + '\')"><span class="glyphicon glyphicon-eye-open"></span>&nbsp;预览</a>');
                        }
                        return actions.join('');
                    }
                }
            ],
            // 请求获取数据后处理回调函数
            responseHandler: function(res) {
                if (res.code == web_status.SUCCESS) {
                    return {rows: res.rows, total: res.total};
                } else {
                    $.modal.alertWarning(res.msg);
                    return {rows: [], total: 0};
                }
            }
        });
    };

    // 查询参数
    obj.queryParams = function (params) {
        // 基础参数
        var temp = {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            sortName: params.sort,
            sortOrder: params.order
        };
        // 搜索框参数
        var json = {};
        $.each($("#" + formId).serializeArray(), function(i, field) {
            if(json[field.name]) {
                json[field.name] += ("," + field.value);
            } else {
                json[field.name] = field.value;
            }
        });

        return $.extend(temp, json);
    };

    return obj;
};

$("#" + uploadId).change(function() {
    if(this.files.length == 0) {
        return;
    }
    var size = this.files[0].size / (1024 * 1024);
    if(size > 10) {
        $.modal.alertWarning("文件不能超过10M");
        $("#" + uploadId).val("");
        return;
    }
    var formdata = new FormData();
    formdata.append("file", this.files[0]);
    $.ajax({
        url: uploadUrl,
        data: formdata,
        type: "post",
        processData: false,
        contentType: false,
        beforeSend: function () {
            $.modal.loading("正在处理中，请稍后...");
        },
        success: function(result) {
            $("#" + uploadId).val("");
            $.operate.saveSuccess(result);
        }
    })
});

function searchData() {
    var params = $("#" + tableId).bootstrapTable('getOptions');
    $("#" + tableId).bootstrapTable('refresh', params);
}

function resetData() {
    $("#" + formId)[0].reset();
    $("#" + tableId).bootstrapTable('refresh');
}

function fileUpload() {
    $("#" + uploadId).click();
}

function fileDownload(id) {
    window.open(downloadUrl + "?id=" + id, "_self");
}

function view(id) {
    window.open(viewUrl + "?id=" + id);
}

function detail(id) {
    $.modal.open("文件信息详情", detailUrl + "/" + id);
}

function remove(id) {
    $.modal.confirm("确定删除该条文件信息吗？", function () {
        var data = {"ids": id};
        $.operate.submit(removeUrl, "post", "json", data, tableId, true);
    })
}

function removeBatch() {
    var rows = $.map($("#" + tableId).bootstrapTable('getSelections'), function (row) {
        return row.id;
    });
    if(rows.length == 0) {
        $.modal.alertWarning("请至少选择一条记录");
        return;
    }
    $.modal.confirm("确认要删除选中的" + rows.length + "条数据吗？", function () {
        var data = {"ids": rows.join()};
        $.operate.submit(removeUrl, "post", "json", data, tableId, true);
    })
}
</script>
</body>
</html>